<script>
import SubSort from '@/components/sub-sort.vue'
import XtxInfiniteLoading from "@/components/xtx-infinite-loading.vue";
import SubBread from './sub-bread.vue'
import SubFilter from './sub-filter.vue'
import GoodsItem from '@/components/goods-item.vue'
import { useRoute } from 'vue-router'
import { ref,watch } from "vue"
import { findSubCategoryGoods } from "@/api/category"
export default {
    name: 'SubCategory',
    components: {
        SubBread,
        SubFilter,
        SubSort,
        GoodsItem,
        XtxInfiniteLoading
    },
    setup(){
        const route = useRoute()
        const loading = ref(false)
        const finished = ref([])
        const goodsList = ref([])
        let reqParams = {
            page: 1,
            pageSize: 20,
        }
        const getData = ()=>{
            loading.value = true
            reqParams.categoryId = route.params.id
            findSubCategoryGoods(reqParams).then(data=>{
                const {result} = data
                if (result.items.length) {
                    goodsList.value.push(...result.items)
                    reqParams.page++
                } else {
                    // 加载完毕
                    finished.value = true
                }
                // 请求结束
                loading.value = false
            })
        }
        // 切换二级分类重新加载
        watch(() => route.params.id, (newVal) => {
            if (newVal && route.path === `/category/sub/${newVal}`) {
                goodsList.value = []
                reqParams = {
                    page: 1,
                    pageSize: 20
                }
                getData()
                finished.value = false
            }
        },{immediate: true})
        // 监听筛选区改变
        const changeFilter = (filterParams) => {
            reqParams = { ...reqParams, ...filterParams }
            reqParams.page = 1
            goodsList.value = []
            getData()
            finished.value = false
        }
        // 监听排序改变
        const changeSort = (sortParams) => {
            reqParams = { ...reqParams, ...sortParams }
            reqParams.page = 1
            goodsList.value = []
            getData()
            finished.value = false
        }
        return { loading, finished, goodsList, getData,changeFilter,changeSort }
    },
}
</script>

<template>
    <div class='sub-category'>
        <div class="container">
            <!-- 面包屑 -->
            <SubBread />
            <SubFilter @filter-change="changeFilter"/>
            <div class="goods-list">
                <SubSort @sort-change="changeSort"/>
                <ul>
                    <li v-for="item in goodsList" :key="item.id">
                        <GoodsItem :good="item" />
                    </li>
                </ul>
                <XtxInfiniteLoading :loading="loading" :finished="finished" @infinite="getData" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.goods-list {
    background: #fff;
    padding: 0 25px;
    margin-top: 25px;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;

        li {
            margin-right: 20px;
            margin-bottom: 20px;

            &:nth-child(5n) {
                margin-right: 0;
            }
        }
    }
}
</style>